<!--
 * @Author: cjy
 * @Date: 2020-11-10 16:51:11
-->
<template>
  <div class="main">
    <h2 class="h-title">图层比较</h2>
    <input id="swipe" type="range" style="width: 100%" v-model="cover" ref="swipe">
    <div id="mapDIV" ref="mapDIV">
        <div id="map" class="map-x"></div>
        <div id="coverLine" ref="coverLine"></div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import Tile from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'
import XYZ from 'ol/source/XYZ'
import { Logo, TileSuperMapRest } from '@supermap/iclient-ol';
import * as control from 'ol/control'

import $ from 'jquery';

export default {
  name: 'TwoMapCover',
  data () {
    return {
      map: null,
      cover: 35,
      leftExtent: 0,
    }
  },
  methods: {
    initMap () {

      let tileUAV = new Tile({
        id: "coverMap", 
        source: new XYZ({
          url: 'http://117.149.229.28:6080/arcgis/rest/services//uav_maps/uav_river_onecycle/MapServer/tile/{z}/{y}/{x}',
          projection: "EPSG:4326",
          
        })
      })
      this.map = new Map({
        controls: control.defaults({ zoom: false}),
        target: "map", 
        layers: [
          new Tile({
            source: new XYZ({
            //   url: 'http://t0.tianditu.com/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              url: 'http://t0.tianditu.com/DataServer?T=img_c&x={x}&y={y}&l={z}&tk=4d314458b2e0a90a498c0ae62142c9fd',
              projection: "EPSG:4326",
            }),
          }),
          tileUAV
      
        ],  
        view: new View({ 
          projection: "EPSG:4326",
          center: [120.30518967694472, 27.463538516843748], 
          // minZoom:10, 
          zoom: 16
        })
      })
    //   pixelRatio: typeof window.devicePixelRatio !== 'undefined' ? window.devicePixelRatio : 1

      // setTimeout(() => {
      //   console.log(this.map.getLayers().getArray()[1].getSource().getTileGrid(), "this.map.getLayers().item(1).getExtent()=====================");
      //   this.updateMapExtent({
      //       // x: window.document.documentElement.clientWidth / 2,
      //       x: this.$refs.mapDIV.clientWidth / 2,
      //       y: 0
      //   });
      // },3000)
      
      console.log(this.map.getLayers().getArray().filter(it=>{
        return it.get('id')=='coverMap';
      })[0]);
      //请求bing地图数据前，根据滑块值设置渲染范围
      tileUAV.on('prerender',(e)=>{
        var ctx=e.context;
        // var width=ctx.canvas.width*(this.cover/100);
        var width=this.leftExtent;
        // console.log(width, "width");
        ctx.save();
        ctx.beginPath();
        // ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);
        ctx.rect(width, 0, - width, ctx.canvas.height);
        ctx.clip();//裁剪
      });
      //请求完成，渲染
      tileUAV.on('postrender',function(e){
        var ctx=e.context;
        ctx.restore();
      });

      // this.map.getLayers().getArray().filter(it=>{
      //   return it.get('id')=='coverMap';
      // })[0].on('postcompose', ()=>{

      // })

      this.$refs.swipe.addEventListener('input', (e)=>{
        // console.log(this.cover, e.target.clientWidth);
        console.log(document.getElementById('coverLine').offsetLeft, "left");
        document.getElementById('coverLine').style.left = e.target.clientWidth*(this.cover/100) + 'px';
        this.map.render()
      })

      //拖动卷帘工具
      this.$refs.coverLine.addEventListener("mousedown", (e)=>{
        // console.log(this.$refs.coverLine.offsetLeft);
        // console.log(e.pageX- 300 - this.$refs.coverLine.offsetLeft);
        let x = e.pageX - this.$refs.coverLine.offsetLeft
        // let y = e.pageY - this.$refs.coverLine.offsetTop

        // 鼠标按下注册移动事件
        document.addEventListener("mousemove", move)
        let that = this;
        function move (e) {
          that.$refs.coverLine.style.left = e.pageX - x + "px"
          that.leftExtent = e.pageX - x;
          that.map.render()
        }
        //按键抬起，注销移动事件
        document.addEventListener("mouseup", ()=>{
          document.removeEventListener("mousemove", move)
        })

      })

    

    },

    // addMapMoveEvent() {
    //     this.$refs.mapDIV.addEventListener('mousemove', (e) => {
    //         document.getElementById('coverLine').style.left = (e.x - 320) + 'px';
    //         this.updateMapExtent({
    //             x: e.x-295,
    //             y: 0
    //         });
    //     })

    //     let zoom = this.map.getView().getZoom();
    //     $("#coverLine").bind('mousewheel DOMMouseScroll', (event) => { //on也可以 bind监听
    //         //Chorme
    //         let wheel = event.originalEvent.wheelDelta;
    //         let detal = event.originalEvent.detail;
    //         if (event.originalEvent.wheelDelta) { //判断浏览器IE,谷歌滚轮事件               
    //             if (wheel > 0) { //当滑轮向上滚动时  
    //                 console.log(wheel, "wheel======+++++=========");
    //                 zoom = zoom + 0.2;
    //                 console.log(zoom, "zoom===============");
    //                this.map.getView().setZoom(zoom)
    //             }
    //             if (wheel < 0) { //当滑轮向下滚动时  
    //                 console.log(wheel, "wheel======-----------=========");
    //                 zoom = zoom - 0.2;
    //                 console.log(zoom, "zoom===============");
    //                this.map.getView().setZoom(zoom)
    //             }
    //         } else
    //         if (event.originalEvent.detail) { //Firefox滚轮事件  
    //             if (detal > 0) { //当滑轮向下滚动时  
    //                 alert('下滚')
    //             }
    //             if (detal < 0) { //当滑轮向上滚动时  
    //                 alert('上滚')
    //             }
    //         }
    //     });
    // },
    // updateMapExtent(windowPostion) {
    //     // 将屏幕坐标 转换为 地图坐标
    //     let pos =this.map.getCoordinateFromPixel([windowPostion.x, windowPostion.y])
    //     // 修改第二个地图的范围
    //     this.map.getLayers().getArray()[1].setExtent([0, 0, pos[0], pos[1]])
    // }

    //请求完成，渲染
        // bing.on('postcompose',function(e){
        // 	var ctx=e.context;
        // 	ctx.restore();
        // });
        //滑块滑动地图重新渲染
        // this.$refs.swipe.addEventListener('input',function(){
        // 	// map.render();
        // },false)
        
  },
  mounted () {
    this.initMap();
    // this.addMapMoveEvent();

  }
}
</script>

<style lang="scss" scoped>
  .main{
    height: 100%;
    #mapDIV{
        width: 100%;
        height: 100%;
        position: relative;
        #map{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        #coverLine {
            // width: 5px;
            width: 100px;
            height: 100%;
            position: absolute;
            top: 0;
            left: calc(50% - 5px);
            background-color: rgba(219, 23, 72, .5);
            z-index: 2;
            // cursor: pointer;
            cursor: move;
        }
    }


  }


</style>